<script>
import NewsItem from '../components/NewsItem.vue'
import ActivityItem from '../components/ActivityItem.vue'
import Page from '../components/Page.vue'

export default {
  name: 'NewsView',
  data() {
    return {
      banner: {},
      news: [],
      page: {},
      activities: []
    }
  },

  computed: {
    adBanner() {
      return {
        'address': this.banner.address,
        'imgSrc': '../../static/images/news_ad.png'
      }
    },
    currentPage() {
      return Number(this.$store.state.route.query.page) || 1
    }
  },

  components: {
    NewsItem,
    ActivityItem,
    Page
  },

  watch: {
    currentPage(page) {
      this.loadItems(page)
    }
  },

  methods: {
    loadItems(page) {
      this.$store
        .dispatch('FETCH_NEWS_DATA', { params: this.$route.query })
        .then(() => {
          if (this.currentPage < 0) {
            this.$router.replace('/news?page=1')
            return
          }

          this.news = this.$store.state.news.news
          this.page = this.$store.state.news.page
          this.activities = this.$store.state.news.activities
        })
    },

    loadPageConfig() {
      this.$store
        .dispatch('FETCH_PAGE_CONFIG', { page: 'news' })
        .then((data) => {
          this.banner = data.link_ad_banner[0]
        })
    }
  },

  beforeMount() {
    this.loadItems(this.currentPage)
    this.loadPageConfig()
  }
}
</script>

<template>
  <div class="container events clearfix" id="news-view">

    <a class="ad" :href="adBanner.address">
      <img :src="adBanner.imgSrc" >
      <button class="close-btn hide"></button>
    </a>

    <div class="events-left">
      <h1>人马新闻<span>&nbsp;|&nbsp;NEWS</span></h1>
      <ul class="list" :data-size="activities.length">
        <news-item v-for="item in news" :news="item"></news-item>
      </ul>

      <page :currentPage="page.currentPage"
        :prePage="page.prePage"
        :nextPage="page.nextPage"
        :prePages="page.prePages"
        :nextPages="page.nextPages">
      </page>
    </div>

    <div class="events-right">
      <h1>人马活动<span>&nbsp;|&nbsp;ACTIVITY</span></h1>
      <ul class="list" style="margin-bottom: 0px;">
        <activity-item v-for="activity in activities" :activity="activity"></activity-item>
      </ul>
      <div class="more-btn" v-if="activities.length">
        <router-link to="/activities">查看更多活动&nbsp;>></router-link>
      </div>
    </div>
    
  </div>
</template>

<style>
@import '../../static/styles/news.css';
</style>